@charset "UTF-8";
/** *
* @authors supmain (mtingfeng@gmail.com)
* @date    2014-12-01 16:24:00
* @update  2014-12-01 16:24:00
* @for index.html
* @version $Id$ */

html , body , .bg_main , .ctmain , .bg_play { height: 100%; }
.bg_main {
	background-color: #f8d762;
}

.bg_play {
	position: relative;


	display: -webkit-box;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-pack: center;

	-webkit-justify-content: center;

	-ms-flex-pack: center;

	justify-content: center;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	z-index: 200;
}
#watering {
	position: absolute;
	top: 110px;
	right: 20px;
	width: 100px;
	min-height: 138px;
	z-index: 201;
	-webkit-transition: all .6s ease-in-out;
	  transition: all .6s ease-in-out;
}
#watering.watering {
	-webkit-animation: 'wateraround' 3s ease-in-out infinite normal;
	        animation: 'wateraround' 3s ease-in-out infinite normal;
}
#watering.watering > img {
	-webkit-animation: 'watering' 2s ease-in-out infinite normal;
	    animation: 'watering' 2s ease-in-out infinite normal;
}
#waterdrop {
	-webkit-transform: translateX(-30px);
	  -ms-transform: translateX(-30px);
	      transform: translateX(-30px);
}
#waterdrop > img {
	width: 80%;
}
#waterdrop > img.drop {
	-webkit-animation: 'breathe' 2s ease-in-out infinite normal;
	        animation: 'breathe' 2s ease-in-out infinite normal;
}
/* 大树 */
#tree { width: 60%; margin-bottom: 30px; }
#tree img , #watering > img { width: 100%; }
#tree.treeBigger {
	-webkit-animation: 'treebigger' 1s ease-in-out infinite alternate;
			animation: 'treebigger' 1s ease-in-out infinite alternate;
}
#bg_floor {
	position: absolute;
	width: 100%; 
	bottom: 0;
	left: 0;
	z-index: 299;
}
#bg_floor img {
	max-width: 100%;
}
#gameguide { position: absolute; top: 50%; left: 0; z-index: 299; width: 100%; text-align: center;  }
#gameguide img { max-height: 100px; }
/* 云朵 */
#bg_cloud { height: 0; }
#bg_cloud > img { position: absolute; z-index: 100; }
#bg_cloud .cloud0 { top: 50px; right: 50px; width: 80px; -webkit-animation: 'anim_cloud0' 8s linear infinite alternate; animation: 'anim_cloud0' 8s linear infinite alternate; }
#bg_cloud .cloud1 { top: 400px; right: 30px; -webkit-animation: 'anim_cloud1' 8s .5s linear infinite alternate; animation: 'anim_cloud1' 8s .5s linear infinite alternate;}
#bg_cloud .cloud2 { top: 300px; left: 20px; -webkit-animation: 'anim_cloud2' 8s 1s linear infinite alternate; animation: 'anim_cloud2' 8s 1s linear infinite alternate;}
#bg_cloud .cloud3 { top: 100px; left: 40px; -webkit-animation: 'anim_cloud3' 8s 1.5s linear infinite alternate; animation: 'anim_cloud3' 8s 1.5s linear infinite alternate;}
#capacity { position: absolute; top: 20px; left: 10px; z-index: 150; }
#capacity p { color: #f7f7f7; text-align: center; }
#capacity p em { margin-right: 4px; font-style: italic; font-weight: 800; color: #c94537; }
#capacity .bg_capacity {
	width: 70px;
	height: 220px;
	background: url("../images/capacity.png") no-repeat center;
	background-size: cover;
}
#capacity_num {
	position: absolute;
	left: 50%;
	bottom: 56px;
	margin-left: -7px;
	width: 14px;
	height: 100px;
	border-radius: 10px;
	background-color: #c94537;
}
/* 分享排名 */
#sns { position: absolute; top: 10px; right: 10px; z-index: 201; }
#sns a > img { width: 50px; }
/* 浇水水壶动画 */
@-webkit-keyframes 'watering'{
	0% { -webkit-transform:rotate(0); transform:rotate(0); }
	50% { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
	100% { -webkit-transform:rotate(0); transform:rotate(0); }
}
@keyframes 'watering'{
	0% { -webkit-transform:rotate(0); transform:rotate(0); }
	100% { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
}
/* 水滴呼吸 */
@-webkit-keyframes 'breathe'{
	0% { -webkit-transform: scale( 1 ) translateY(0); transform: scale( 1 ) translateY(0); }
	50% {-webkit-transform: scale( 1.2 ) translateY(20px);transform: scale( 1.2 ) translateY(20px);}
	100% { -webkit-transform: scale( 1 ) translateY(0); transform: scale( 1 ) translateY(0); }
}
@keyframes 'breathe'{
	0% { -webkit-transform: scale( 1 ) translateY(0); transform: scale( 1 ) translateY(0); }
	50% {-webkit-transform: scale( 1.2 ) translateY(20px);transform: scale( 1.2 ) translateY(20px);}
	100% { -webkit-transform: scale( 1 ) translateY(0); transform: scale( 1 ) translateY(0); }
}
/* 水壶运动 */
@-webkit-keyframes 'wateraround'{
	0% { -webkit-transform: translateX( 0 ); transform: translateX( 0 ); }
	50% { -webkit-transform: translateX( -100px ); transform: translateX( -100px ); }
	100% { -webkit-transform: translateX( 0 ); transform: translateX( 0 ); }
}
@keyframes 'wateraround'{
	0% { -webkit-transform: translateX( 0 ); transform: translateX( 0 ); }
	50% { -webkit-transform: translateX( -100px ); transform: translateX( -100px ); }
	100% { -webkit-transform: translateX( 0 ); transform: translateX( 0 ); }
}
/* 树木变大 */
@-webkit-keyframes 'treebigger' {
	0% { -webkit-transform: scale( 1 ); transform: scale( 1 ); }
	50% { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
	100% { -webkit-transform: scale( 1 ); transform: scale( 1 ); }
}
@keyframes 'treebigger' {
	0% { -webkit-transform: scale( 1 ); transform: scale( 1 ); }
	50% { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
	100% { -webkit-transform: scale( 1 ); transform: scale( 1 ); }
}
/* 云朵动画 */
@-webkit-keyframes 'anim_cloud0' {
	0% { right: 50px; }
	50% { right: 100px; }
	100% { right: 50px; }
}
@keyframes 'anim_cloud0' {
	0% { right: 50px; }
	50% { right: 100px; }
	100% { right: 50px; }
}
@-webkit-keyframes 'anim_cloud1' {
	0% { right: 30px; }
	50% { right: 80px; }
	100% { right: 30px; }
}
@keyframes 'anim_cloud1' {
	0% { right: 30px; }
	50% { right: 80px; }
	100% { right: 30px; }
}
@-webkit-keyframes 'anim_cloud2' {
	0% { left: 20px; }
	50% { left: 70px; }
	100% { left: 20px; }
}
@keyframes 'anim_cloud2' {
	0% { left: 20px; }
	50% { left: 70px; }
	100% { left: 20px; }
}
@-webkit-keyframes 'anim_cloud3' {
	0% { left: 40px; }
	50% { left: 90px; }
	100% { right: 40px; }
}
@keyframes 'anim_cloud3' {
	0% { left: 40px; }
	50% { left: 90px; }
	100% { right: 40px; }
}
/* 媒体查询 */
@media ( max-width: 320px ) {

}
@media ( max-width: 640px ) and ( orientation:landscape ) {

}
@media ( min-width: 600px ) {

}